<template>
  <div class="flex-1 rounded mt-1">
    <el-carousel trigger="click" height="118px" v-if="imageList.length < 0 || imageList== ''">
      <el-carousel-item v-for="item in 3" :key="item">
        <h3 class="small">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <el-carousel trigger="click" height="118px" v-if="imageList.length > 0">
      <el-carousel-item v-for="item in imageList" :key="item.url">
        <img class="rotation-img" :src="item.url" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  import {
    moduleDetailUrl
  } from "@/utils/clientistration"
  export default {
    data() {
      return {
        imageList: []
      }
    },
    props: {
      rotationId: {
        type: Number,
        default: ''
      },
      swiperList: {
        type: [String, Object],
        default: () => {
          return {};
        }
      },
      initImageListShow: {
        type: Number,
        default: 0
      }
    },
    watch: {
      swiperList(newVal) {
        this.imageList = newVal
      },
      initImageListShow(newVal) {
        this.imageListShow = newVal
      },
      rotationId(newVal) {
        this.rotationId = newVal
      }
    },
    created() {
      const moduleId = this.rotationId
      this.getModuleDetail(moduleId)
    },
    methods: {
      getModuleDetail(moduleId) {
        this.$get(moduleDetailUrl + moduleId + '/').then(res => {
          this.imageList = res.data.data.cationDetail[0].image_list
          this.imageListShow = res.data.data.cationDetail[0].image_list_show
        })
      }
    }

  }
</script>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .rotation-img {
    width: 100%;
    height: 118px;
  }
</style>
